import Overlay from 'ol/Overlay'
import * as olProj from 'ol/proj'
export default {
  data () {
    return {
    }
  },
  watch: {
    // watch
  },
  mounted () {
    // mounted
  },
  methods: {
    /**
    * @description 程序休眠
    * @param ms {number}休眠时间，单位是毫秒
    * @return
    */
    sleep (ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    },

    /**
     * @description 添加闪烁用的html元素
     * @param id {String} 生成闪烁的id；aCoord{Array}闪烁的坐标数组；
     *           sSRS {String}数据的参考坐标系；oMap{Object}地图对象；
     * @return {Array} 返回[minx, miny, maxx, maxy] 范围盒
     */
    addCSSflash (flashID, aCoord, sSRS = 'EPSG:4326', oMap = this.imap) {
      // 检查闪烁是否已经存在
      const hasFlash = document.getElementById(flashID) // overlayID
      if (hasFlash) return // 如果已经创建气泡，返回不在创建
      // 只有3857坐标系
      // 添加闪烁层newMarker
      const overlay = document.getElementById('flash_container') // 获取overlayer容器
      const flashDIV = document.createElement('div') // 创建新的overlay的DOM元素
      flashDIV.className = 'marker'
      flashDIV.id = flashID // 回头用与查找此元素
      // flashDIV.style.zIndex = parseInt( String(new Date().getTime()).substr(5,5) )
      const el1 = document.createElement('p') // 创建元素1 <p>标签，添加到新建的DIV元素中
      flashDIV.appendChild(el1)
      // const el2 = document.createElement('span') // 创建元素2 <span>标签，添加到新建的DIV元素中
      // flashDIV.appendChild(el2) // 暂时未使用（保留--后期可以添加文本）

      // 需要校验下坐标，如果经纬度无效返回不做处理
      if (!aCoord || aCoord.length === 0) return
      // 获取初始坐标系; 实际就是this.conf.RCS
      // let sourceProj = oMap.getView().getProjection()
      let aCoordinate = aCoord
      if (sSRS !== this.conf.RCS) {
        aCoordinate = olProj.transform(aCoord, sSRS, this.conf.RCS) // [longitude, latitude]
      }

      overlay.appendChild(flashDIV)
      // 生成新的Overlay（闪烁）
      const newMarker = new Overlay({
        id: flashID,
        position: aCoordinate,
        positioning: 'center-center',
        element: flashDIV,
        stopEvent: false
      })
      newMarker.set('type', 'flash') // 删除时确认类型（区分是否为气泡）
      // 将闪烁添加到地图中！
      oMap.addOverlay(newMarker)
    },

    /**
     * @description 删除所有的闪烁
     * @param oMap{Object}地图对象
     * @return null
     */
    clearAllflash (oMap = this.imap) {
      const aFlashList = oMap.getOverlays()
      // console.log(typeof aFlashList)
      const iItemCount = aFlashList.getLength()
      // console.log(iItemCount)
      for (let i = iItemCount - 1; i >= 0; i--) {
        if (aFlashList.item(i).get('type') === 'flash') {
          // oMap.removeOverlay(element)
          aFlashList.remove(aFlashList.item(i))
        }
      }
    },

    /**
     * @description 删除所有的Overlay （闪烁和气泡）
     * @param oMap{Object}地图对象
     * @return null
     */
    clearAllOverlay (oMap = this.imap) {
      // const aFlashList = oMap.getOverlays().clear()
      // console.log(aFlashList)
      oMap.getOverlays().clear()
    },

    /**
     * @description 根据给定的flashID，删除指定的闪烁
     * @param sFlashID {String} 闪烁的id，oMap{Object}地图对象
     * @return null
     */
    clearFlashByID (sFlashID, oMap = this.imap) {
      const flashLay = oMap.getOverlayById(sFlashID)
      if (flashLay) {
        // oMap.removeLayer(flashLay)
        oMap.removeOverlay(flashLay)
      }
      // 以下可能不需要
      const flashDIV = document.getElementById(sFlashID)
      if (flashDIV) {
        flashDIV.parentNode.removeChild(flashDIV)
      }
    },

    /**
     * @description 将所有闪烁标注位为1的元素打开闪烁效果
     * @param oMap{Object}地图对象； sLayerName {String}当前要处理的图层名称
     * @return null
    */
    showflash (sLayerName = 'poiLayer', oMap = this.imap) {
      // 根据名称获取指定的图层
      const oMapLayer = this.getLayerByName(sLayerName, oMap)
      // console.log(oMapLayer)
      if (!oMapLayer) {
        return
      }
      const featureList = oMapLayer.getSource().getFeatures()
      for (let j = 0; j < featureList.length; j++) {
        const featureFlash = featureList[j].get('iFlash')
        console.log(featureFlash)
        if (!featureFlash) {
          continue
        } else {
        // if (featureFlash > 0) {
          const sGeoType = featureList[j].getGeometry().getType()
          if (sGeoType === 'Point') {
            const id = featureList[j].getId()
            const aPnt = featureList[j].getGeometry().getCoordinates()
            console.log(aPnt)
            // 当前地图中的feature坐标一定是和map使用的坐标相同，所以数据坐标这里使用了this.conf.RCS
            this.addCSSflash(id, aPnt, this.conf.RCS, oMap) // 'EPSG:3857'
          }
        }
      }
    }
    // 当前方法
  }
}
